<template>
  <div>
    <ElDivider>弹窗设置</ElDivider>
    <ElForm :model="dialogProps" label-width="80px">
      <ElFormItem prop="width" label="弹窗宽度">
        <ElInput v-model="dialogProps['width']"></ElInput>
      </ElFormItem>
      <ElFormItem prop="width" label="弹窗高度">
        <ElInput v-model="dialogProps['height']"></ElInput>
      </ElFormItem>
      <ElFormItem prop="fullscreen" label="是否全屏">
        <ElSwitch v-model="dialogProps['fullscreen']" :inline-prompt="true" active-text="是" inactive-text="否"></ElSwitch>
      </ElFormItem>
      <ElFormItem prop="showFullScreen" label="控制全屏">
        <ElSwitch v-model="dialogProps['showFullScreen']" :inline-prompt="true" active-text="是" inactive-text="否"></ElSwitch>
      </ElFormItem>
      <ElFormItem prop="modal" label="是否遮罩">
        <ElSwitch v-model="dialogProps['modal']" :inline-prompt="true" active-text="是" inactive-text="否"></ElSwitch>
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts" name="DialogPanel">
import { ElDivider, ElForm, ElFormItem, ElSwitch, ElInput } from "element-plus";
import { computed } from "vue";
const props = defineProps({
  designer: {
    type: Object
  }
});

const dialogProps = computed(() => props.designer!.widget!.dialogProps);
</script>

<style scoped></style>
